<template>
  <div>
    <!-- 员工数据看板-页面销售额开始 -->
    <div class="proCharts" ref='charts'></div>
  </div>
</template>

<script>
/**
 *
 *       salese: { // 销售额 总
 *         config: {
 *           dateList: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
 *         },
 *         dataList: [
 *           {
 *             color: '#1edacd',
 *             name: '天兰',
 *             list: [56.5, 82.1, 88.7, 70.1, 53.4, 85.1,40.1, 62.2, 69.5, 36.4, 45.2, 32.5]
 *           },
 *           {
 *             color: '#4168e7',
 *             name: '健驰',
 *             list: [51.1, 51.4, 55.1, 53.3, 73.8, 68.7,56.5, 82.1, 88.7, 70.1, 53.4, 85.1]
 *           },
 *           {
 *             color: '#2bd753',
 *             name: '龙源事业部',
 *             list: [40.1, 62.2, 69.5, 36.4, 45.2, 32.5,51.1, 51.4, 55.1, 53.3, 73.8, 68.7]
 *           }
 *         ]
 *       },
 */
import 'echarts/map/js/china.js'
export default {
  name: 'comparison',
  props: {
    documentId: {
      type: String,
      default: () => ''
    },
    config: {
      type: Object,
      default: () => {
      }
    },
    dataList: {
      type: Array,
      default: () => []
    },
    loading: {
      type: Boolean,
      default: () => false
    }
  },
  data () {
    return {
      // levelList: null
    }
  },
  watch: {
    $route () {
      // this.testFun()
    },
    dataList (val) {
      // this.barGraph(this.documentId)
    }
  },
  mounted () {
    this.$nextTick(_ => {
      this.mycharts()
      const documentId = this.documentId
      if (documentId) {
        // this.barGraph(documentId)
        // this.mycharts()
      }
    })
  },
  created () {},
  methods: {
    // 员工数据看板页面销售额
    mycharts () {

      const config = this.config
      const dataListTemp = [...this.dataList]
      const colorArr = []
      const legendDataArr = [] // 顶部线条按钮
      const seriesArr = []

      dataListTemp.forEach((item, index) => {
        colorArr.push(item.color)
        const legendDataObj = {
          name: item.name,
          textStyle: { color: '#2A2E34' }// 顶部线条按钮文字颜色
        }
        legendDataArr.push(legendDataObj)
        const seriesObj = {
            type: 'line',
            smooth: true, // 是否润滑：曲线
            seriesLayoutBy: 'row',
            name: item.name,
            showSymbol: false, // 去掉线中的原点
            data: item.list,
            lineStyle: { color: item.color }// 线的颜色
        }
        seriesArr.push(seriesObj)
      })
      const charts = this.$echarts.init(this.$refs.charts, 'macarons')
      window.addEventListener('resize', function () {
        charts.resize() // myChart 是实例对象
      })
      charts.setOption({
        // 员工数据看板页面销售额开始
        color: colorArr,
        title: { text: '' },
        tooltip: { // 提示框
          extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);',
          trigger: 'axis',
          textStyle: { color: '#333333' }, // 设置文字颜色
          borderColor: '#2D8CF0', // 设置边框颜色
          backgroundColor: '#ffffff' // 设置背景颜色
        },
        legend: { // 图例的类型
          icon: 'roundRect', // 图例icon图标
          left: 'right', // 顶部线条按钮对齐方式
          data: legendDataArr, // 顶部线条按钮
        },
        grid: { // 调整图标位置
          left: '3%',
          right: '4%',
          bottom: '3%',
          top: '17%',
          containLabel: true // grid区域是否包含坐标轴的刻度标签
        },
        xAxis: {
          type: 'category', // 坐标轴类型。
          boundaryGap: false, // 坐标轴两边留白策略
          data: config.dateList,
          axisLabel: { // 坐标轴刻度标签的相关设置
            interval: 0,
            textStyle: { color: '#999999', fontSize: 10 }
          },
          axisLine: { // 坐标轴轴线相关设置
            show: true,
            lineStyle: { color: '#999999' }
          },
          axisTick: { show: true }// 坐标轴刻度相关设置。
        },
        yAxis: {
          gridIndex: 0,
          // type: 'value',
          axisLabel: { // x轴的坐标文字
            show: true,
            textStyle: { color: '#999999' } // 文字的颜色
          },
          max: 100, // 最大值100
          axisLine: { // 坐标轴轴线相关设置
            show: false, // false 不显示Y轴线条
            textStyle: { color: '#999999' } // 文字的颜色
          },
          axisTick: { show: false }, // 坐标轴刻度相关设置。
          splitLine: { // 坐标在grid区域的分割线
            show: true,
            lineStyle: { type: 'dashed' }// 设置分割线的样式(图表横线颜色)
          }
        },
        series: seriesArr
        // 员工数据看板页面销售额结束
      })
      // 图表自适应
      window.addEventListener('resize', function () {
        charts.resize() // myChart 是实例对象
      })
    },
  }
}
</script>
<style scoped lang="scss">
.proCharts{
  width: 100%;
  height: 400px;
  margin-bottom: 20px;
}
</style>
